<template>
	<view class="content">
		<view class="banner">
			 <u-swiper
			    :list="list1"
			    @change="change"
			    @click="click"
				height="200"
			>
			</u-swiper>
		</view>
		<!-- 咨询分类 -->
		<u-tabs :list="list2" @click="enterType()"></u-tabs>
		<view class="advice">
			<view class="adviceList">				
				<view class="adviceContent">
					<view class="adviceCover">
						<u--image 
							:showLoading="true" 
							:src="src" 
							width="200rpx" 
							height="200rpx" 
							radius='10'
							@click="click"
						>
						</u--image>
					</view>
					<view class="introduction" style="margin-left:20rpx;">
						<view class="introductionTitle" style="font-size: 20px;">
							这里是标题
						</view>
						<view class="introductionMsg">
							这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				 list1: [
				    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list2: [{
						name: '关注',
					}, {
						name: '推荐',
					}, {
						name: '电影'
					}, {
						name: '科技'
					}, {
						name: '音乐'
					}, {
						name: '美食'
					}, {
						name: '文化'
					}, {
						name: '财经'
					}, {
						name: '手工'
					}]
			}
		},
		onLoad() {

		},
		methods: {
			change(e){
				
			},
			enterType(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style>
	.content{
		background-color:#eee;
		height:100vh;
		font-size:30rpx;
	}
	.banner{
		background-image: linear-gradient(to bottom, #00b8ff 10%, white 100%);
	}
	.advice{
		margin-top:20rpx;
		border-radius:20rpx;
		font-size:30rpx;
		width:97%;
		margin:0 auto;
		margin-top:10rpx;
		background-color: white;
	}
	.type{
		display: flex;
		justify-content: space-between;
		padding-bottom:10rpx;
	}
	.adviceContent{
		margin-top:20rpx;
		display: flex;
		padding:20rpx;
	}
	.introduction{
		height:200rpx;
	}
	.introductionMsg {
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 4; /* 设置最多显示的行数，例如这里设置为3行 */
	}
	.nav{
		padding:10rpx;
		display: flex;
		border-radius:10rpx;
		background-color: white;
		margin-top:20rpx;
	}
	.navList{
		width:20%;
		align-items: center;
		text-align: center;
		margin-top:10rpx;
	}
	.u-tabs{
		background-color: white;
	}
</style>
